@charset "UTF-8";
@import "_basis";

.content-main {
  > div {
    flex: 1;
    display: flex;
    flex-direction: column;

    > div {
      display: flex;
      flex-direction: column;
    }
  }

  .content-title {
    display: flex;
    align-items: center;
    line-height: 36px;
    font-size: 15px;
    color: $colorTurquoise;
    text-indent: 36px;
    >p{
      width: 135px;
    }
    .change{
      margin-left:20px;
      width: 20px;
      cursor: pointer;
    }
  }
  .content-center {
    position: relative;
    .content-center-bg {
      position: relative;
      background: url("../images/index-center-top-left.png") no-repeat top right,url("../images/index-center-top-right.png") no-repeat top left;
      &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 26px;
        bottom: 16px;
        width: 100%;
        background-image: url("../images/index-center.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
        z-index: 1;
      }
      &:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        height: 16px;
        width: 100%;
        background:url("../images/index-center-bottom.png");
        background-size: 100% auto;
        z-index:11;
      }
      &.time-box:before{
        top: 50px;
        background-image: url("../images/index-center-bottom1-bg.png");
      }
    }
    .time-box {
      padding-top: 25px;
      animate-delay: 3s;
      -webkit-animation-delay:3s; /* Safari 和 Chrome */
      .flex1 {
        position: relative;
        z-index: 2;
      }
      .index-title {
        background-image: url("../images/index-center-bottom-bg.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        color: $colorTurquoise;
        text-align: center;
        font-size: 18px;
        line-height: 27px;
      }
    }
    .data-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 212px;
      z-index: 22;
      background-size: 260px 58px;
      ul {
        position: relative;
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding-top: 60px;
        z-index: 2;
        li {
          flex: 1;
          //margin-right: 60px;
          text-align: center;
          padding-bottom: 10px;
          //min-width: 285px;
          background-image: url("../images/index-li-bg.png");
          background-repeat: no-repeat;
          background-position: bottom right;
          background-size: 285px auto;
          &:nth-of-type(1){
            .numberStyle{
              i{
                color: #00E4FF;
              }
            }
          }
          &:nth-of-type(2){
            .numberStyle{
              i{
                color: #53FCB3;
              }
            }
          }
          &:nth-of-type(3){
            .numberStyle{
              i{
                color: #E76D59;
              }
            }
          }
          span{
            font-size: 45px;
            font-family: "ACENS";
          }
          i{
            font-size: 45px;
            color: $colorTurquoise;
            img {
              display: block;
            }
          }
          div {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            font-size: 18px;
            color: #fff;
            img{
              width: 26px;
              margin-right:5px;
            }
          }
        }
      }
    }
    #index_2{
      position: relative;
      .index-prop{
        position: absolute;
        top:70%;
        left:28%;
        width:198px;
        padding:10px;
        border: 1px solid #2EA6FF;
        background-color: #000;
        border-radius: 4px;
        &::before{
          position: absolute;
          left: 50%;
          bottom: -10px;
          transform: rotate(45deg) translateX(-50%);
          content: '';
          width:10px;
          height: 10px;
          background: #000;
          border: 1px solid #2EA6FF;
          border-top:0;
          border-left: 0;

        }
        >P{
          line-height: 32px;
        }
        >h3{
          color: #00E4FF;
          font-size: 14px;
        }
      }
      //height:442px;
      >img{
        width: 38%;
        margin:150px auto 5px;
      }
    }
    #index_3{
      margin-top:-20px;
    }
    .time-box {
      display: flex;
    }
  }
  .content-right {
    margin-left:16px;
    .content-right-bg {
      margin-bottom: 20px;
      background-image: url("../images/title-bg-1.png");
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 258px 57px;
    }
    .content-right-top {
      display: flex;
      flex-direction: column ;
      height: 100%;
      >div{
        display: flex;
        flex-direction: column;
        &:nth-child(1){
          animate-delay: 4s;
          -webkit-animation-delay:4s; /* Safari 和 Chrome */
        }
        &:nth-child(2){
          animate-delay: 5s;
          -webkit-animation-delay:5s; /* Safari 和 Chrome */
        }
        &:nth-child(3){
           animate-delay: 6s;
           -webkit-animation-delay:6s; /* Safari 和 Chrome */
         }
        &:nth-child(4){
          animate-delay: 7s;
          -webkit-animation-delay:7s; /* Safari 和 Chrome */
        }
      }
    }
    .sex-box {
      display: flex;
      flex-direction: column ;
      animate-delay: 7s;
      -webkit-animation-delay:7s; /* Safari 和 Chrome */
    }

  }
  .content-left {
    margin-right:16px;
    > div {
      margin-bottom: 20px;
      background-image: url("../images/title-bg-1.png");
      background-repeat: no-repeat;
      background-position: left top;
      background-size: 258px 57px;
      &:last-child{
        margin-bottom:0
      }
      &.heroic-box {
        .content-left-main {
          padding: 10px;
        }
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
          li {
            display: flex;
            justify-content: center;
           width: 33.333333%;
            &:nth-of-type(3n){
              margin-bottom: 20px;
            }

            .img-box {
              position: relative;
              max-width: 38px;
              min-width: 38px;
              margin-right: 10px;
            }

            > .heroic-content {
              min-width: 43px;
              max-width: 43px;
              display: flex;
              flex-direction: column;
              align-items: center;
              font-size: 14px;
              color: #fff;

              b {
                font-weight: normal;
                color: $colorTurquoise;
                font-size: 20px;
              }

              p{
                font-size: 14px;
                text-align: center;
              }
            }
          }
        }
      }

      &.voice-box {
        font-size: 14px;
        animate-delay: 1s;
        -webkit-animation-delay:1s; /* Safari 和 Chrome */
        .content-left-main {
          padding: 10px;
          div {
            color: $colorTurquoise;
            line-height: 32px;

            b {
              font-size: 18px;
            }
          }

          p {
            color: $colorGreen;
          }
          ul {
            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10px;
              font-size: 12px;
              color: #fff;
              &:first-child{
               i{
                 background-color: $colorRed;
               }
              }
              &:nth-child(2){
                i{
                  background-color: $colorYellow;
                }
              }
              &:nth-child(3){
                i{
                  background-color: $colorTurquoise;
                }
              }
              i{
                width: 15px;
                height: 15px;
                margin-right: 4px;
                border-radius: 50%;
                text-align: center;
              }
              span{
                //width: 60px;
                width: auto;
              }
              b{
                flex: 1;
                position: relative;
                margin-right: 4px;
                &:before{
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 0;
                  width: 100%;
                  border-top:1px dotted rgba(255,89,89,.6);
                }
              }
              strong {
                color: $colorRed;
                width: 50px;
              }
            }
          }
        }
      }
      &.traffic-box {
        display: flex;
        flex-direction: column;
        animate-delay: 2s;
        -webkit-animation-delay:2s; /* Safari 和 Chrome */
        .content-left-main {
          display: flex;
          flex-direction: column;
          ul{
            display: flex;
            justify-content:space-around;
            align-items: center;
            text-align: center;
            color: #fff;
            li{
              flex: 1;
              p{
                margin: 16px 0 6px;
              }
              span {
                height: 26px;
                display: block;
              }
              i{
                position: relative;
                width:22px;
                height: 24px;
                margin: 0 2px;
                font-size: 16px;
                line-height: 24px;
                font-family: 'DIN';
                color: #fff;
                background:rgba(0,228,255,0.16);
                &:before{
                  position: absolute;
                  content: '';
                  left: 0;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  border:1px solid rgba(0,228,255,1);
                  margin-top: -1px;
                }
                &:after{
                  position: absolute;
                  content: '';
                  left: 0;
                  bottom: 0;
                  width: 100%;
                  height: 1px;
                 background:  rgba(0,228,255,1);
                }
                //border:1px solid rgba(0,228,255,1);
              }
            }
          }
        }
      }
    }

  }

  .content-left-main {
    position: relative;
    flex: 1;
    background: url("../images/content-bottom-1.png") bottom left no-repeat;
    background-size: 100% 13px;
    z-index: 2;

    &:before {
      content: "";
      position: absolute;
      top: -11px;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 17px;
      background: url("../images/content-top-1.png") top left no-repeat;
      background-size: 100% 100%;
    }

    &:after {
      content: "";
      position: absolute;
      top: 6px;
      bottom: 13px;
      left: 0;
      z-index: -1;
      width: 100%;
      background-image: url("../images/content-center-1.png");
      background-repeat: repeat;
      background-size: 100% auto;
    }
  }
}



